/* 设置定义的全局数据变量 */
const vueData = {
    data: function () {
        return {
            message: ''
        }
    }
}


/* 设置定义的全局数据变量 */
const vueOptions = {
    // Vue 3 生命周期钩子
    beforeCreate: function() {
        console.log('1. beforeCreate - 实例初始化之后，data 和 methods 之前');
    },
    created: function() {
        console.log('2. created - 实例创建完成，已初始化 data 和 methods');
    },
    beforeMount: function() {
        console.log('3. beforeMount - 挂载开始之前被调用');
    },
    mounted: function() {
        console.log('4. mounted - 实例已挂载到DOM');
    },
    beforeUpdate: function() {
        console.log('5. beforeUpdate - 数据更新时调用，发生在虚拟DOM打补丁之前');
    },
    updated: function() {
        console.log('6. updated - 由于数据更改导致的虚拟DOM重新渲染和打补丁完成');
    },
    beforeUnmount: function() {
        console.log('7. beforeUnmount - 卸载组件实例之前调用');
    },
    unmounted: function() {
        console.log('8. unmounted - 组件实例已卸载');
    },

    // 错误处理生命周期
    errorCaptured: function(err, instance, info) {
        console.log('errorCaptured - 捕获来自子孙组件的错误时被调用', err, instance, info);
        return false;
    },

    // Vue 3 新增的生命周期函数
    renderTracked: function(e) {
        console.log('renderTracked - 当虚拟DOM重新渲染被追踪时调用', e);
    },
    renderTriggered: function(e) {
        console.log('renderTriggered - 当虚拟DOM重新渲染被触发时调用', e);
    },

    watch: {
        message: function (newMsg) {
            console.log('message 监听到数据变化', newMsg);
        }
    },

    methods: {
        /*
        changeMsg: function (newMsg) {
            console.log('changeMsg 方法被调用', newMsg);
            this.msg = 'changed msg';
        }
        */
    }
}

const vueSettings = {
    setup() {
        // 在组合式API中使用生命周期钩子需要从Vue中导入
        /* const {
            ref,
            onBeforeMount,
            onMounted,
            onBeforeUpdate,
            onUpdated,
            onBeforeUnmount,
            onUnmounted,
            onErrorCaptured,
            onRenderTracked,
            onRenderTriggered
        } = Vue;
        */
        const msg = ref('Click me');

        const changeMsg = (newMsg) => {
            msg.value = newMsg || 'changed msg';
        };

        /*
        // 组合式API生命周期钩子
        onBeforeMount(() => {
            console.log('1. onBeforeMount - 挂载开始之前被调用');
        });

        onMounted(() => {
            console.log('2. onMounted - 实例已挂载到DOM');
        });

        onBeforeUpdate(() => {
            console.log('3. onBeforeUpdate - 数据更新时调用，发生在虚拟DOM打补丁之前');
        });

        onUpdated(() => {
            console.log('4. onUpdated - 由于数据更改导致的虚拟DOM重新渲染和打补丁完成');
        });

        onBeforeUnmount(() => {
            console.log('5. onBeforeUnmount - 卸载组件实例之前调用');
        });

        onUnmounted(() => {
            console.log('6. onUnmounted - 组件实例已卸载');
        });

        onErrorCaptured((err, instance, info) => {
            console.log('onErrorCaptured - 捕获来自子孙组件的错误时被调用', err, instance, info);
            return false;
        });

        onRenderTracked((e) => {
            console.log('onRenderTracked - 当虚拟DOM重新渲染被追踪时调用', e);
        });

        onRenderTriggered((e) => {
            console.log('onRenderTriggered - 当虚拟DOM重新渲染被触发时调用', e);
        });
        */

        // 暴露给模板的数据和方法
        return {
            msg,
            changeMsg
        };
    }
};

const vueMerged = { ...vueData, ...vueOptions, ...vueSettings };